// pages/homes/overview/overview.js
import * as echarts from '../../../ec-canvas/echarts';

var dataList1 = [];
var dataList2 = [];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec1: {
      lazyLoad: true
    },
    ec2: {
      lazyLoad: true
    },
    overview: {}
  },


  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //初始化echarts
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    this.echartsComponnet2 = this.selectComponent('#mychart2');
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    //获取总体情况数据
    wx.cloud.callFunction({
      name: 'wwxFuns2',
      data:({
        name: 'get_overview'
      })
    })
    .then(res => {
      console.log(res.result)
      this.setData({
        overview: res.result
      })
      //对echart数据进行设置
      this.getData(); //获取数据
      wx.hideLoading()
    })
    
  },

  //获取图表数据
  getData(){
    this.init_echarts1(this.data.overview.assessment_detail);//初始化图表1
    this.init_echarts2(this.data.overview.wait_oper_detail);//初始化图表2
  },

  //初始化图表1
  init_echarts1: function (data) {
    this.echartsComponnet1.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  //初始化图表2
  init_echarts2: function (data) {
    this.echartsComponnet2.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

  //对表格数据进行绑定
  getOption: function (data) {
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} {b} : {c} '
      },
      legend: {
          show: false,
          orient: 'vertical',
          left: '70%'
      },
      series: [
          {
              name: '血型',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              showVal: true,
              data: data,
              itemStyle:{ 
                normal:{ 
                   label:{ 
                      show: true, 
                      formatter: '血型{b}: {c}人' ,
                      textStyle: { 
                        fontSize: 14
                     }
                      }, 
                      labelLine :{show:true} 
                      } 
                 } 
  
          }
      ]
    }
    return option;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})